<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue用户列表展示</title>
</head>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<body>
<div id="div">
    管理员名字：<input name="username" v-model="username">
    管理员密码：<input name="password" v-model="password">
    <button v-on:click="check()">登录</button>
    <br>
        <span id="msg">{{msg}}</span>
        <table>
            <tr v-show="title">
                <td>名字</td>
                <td>密码</td>
            </tr>
            <tr v-for="ele of users">
                <td >
                    {{ele.username}}
                </td>
                <td>
                    {{ele.password}}
                </td>
            </tr>
        </table>
        <br>
</div>
</body>
<script>
    new Vue({
        el: "#div",
        data: {
            username: "",
            password: "",
            msg: "----名单----",
            title:false,
            users:""
        },
        methods: {
            check() {
                let userJson = {username: this.username, password: this.password};
                let url = "UserServlet";
                axios.post(url, userJson).then(resp=>{
                    this.msg = resp.data.msg;
                    console.log(resp.data.msg);
                    if(resp.data.flag){
                        this.users=resp.data.data;
                        this.title = true;
                    }
                });
            }
        }

    });


</script>
</html>